<template>
    <div class="gjfcz">
        <div class="cz-input">
            <input type="text" placeholder="请输入您充值的管家服务费金额">
        </div>
        <p>
            您充值的管家服务费金额等同于您的宽带费金额,充值成功后半小时客户人员会通过电话联系您，请保持电话畅通
        </p>
        <h3 class="yhcz">优惠充值</h3>
        
        <ul class="cz-list">
            <li v-for="(item,index) in radios" :key="item.id">
                <span :class="{'on':item.isChecked}"></span>
                <input v-model="radio" :value="item.value" :checked='item.isChecked'  @click="check(index)" type="radio">{{item.value}}
                <p>售价：{{item.label}}元</p>
            </li>
        </ul>

        <a :href="myinfo()" class="czbtn">确认充值</a>
    </div>
</template>

<script>
export default {
    data() {
        return {
            radio: '100',
            radios:[{
                label: '100',
                value:'100',
                isChecked: true,
            },
            {
                label: '298',
                value:'300',
                isChecked: false,
            },{
                label: '498',
                value:'500',
                isChecked: false,
            },{
                label: '795',
                value:'800',
                isChecked: false,
            },{
                label: '990',
                value:'1000',
                isChecked: false,
            },{
                label: '1180',
                value:'1200',
                isChecked: false,
            }]
        }
        },
        methods: {
            check(index) {
                this.radios.forEach((item) => {
                    item.isChecked = false
                })
                this.radio = this.radios[index].value
                this.radios[index].isChecked = true
            },
            myinfo(){
                return '/chongzhisuccess'
            }
        }
}
</script>


<style lang="scss" scoped>
.gjfcz{
    background: #F7F7F7;
    display: flex;
    flex-flow: column wrap;
    align-content: space-around;
    flex: auto;
    .cz-input{
        background: #EBEBEB;
        padding: 8px 0;
        input{
            width: 100%;
            background: #fff;
            height: 48px;
            text-indent: 10px;
            font-size: 15px;
            outline: none;
        }
    }
    >p{
        color: #FF5622;
        margin: 10px;
        position: relative;
        padding-left: 10px;
        text-align: justify;
        &::before{
            content: '*';
            position: absolute;
            left: 0;
            top: 2px;
        }
    }
    h3.yhcz{
        font:400 18px/1 '';
        margin: 10px;
        color: #555;
    }
    a.czbtn{
        display: block;
        background: #FF5723;
        height: 48px;
        margin: 15px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 48px;
        letter-spacing: 5px;
        border-radius:5px;
    }
    .cz-list{
        margin:0 10px;
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        li{
            flex: 0 0 31%;
            text-align: center;
            position: relative;
            border: 1px solid #1B85E9;
            box-sizing: border-box;
            margin-bottom: 10px;
            padding: 15px 0;
            color: #1B85E9;
            font-size: 18px;
            p{
                font-size: 12px;
            }
            input{                
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                outline: none;
            }
        }
    }
}
</style>

